<template>
  <div class="flat-container">
    <div class="matchs-item" :key="index" v-for="(item, index) in matchList">
      <div class="matchs-title" @click="showDetail(item)">
        {{item.title}}
        <img
          :class="{active: item.showDetail}"
          src="../../../assets/imgs/live/touzhu_icon_shangla.png"
          alt
        >
      </div>
      <div class="matchs-detail" v-if="item.showDetail">
        <div class="match-item" :key="i" v-for="(match, i) in item.matches_list.filter(m=>m.spf_sell_status===1 && m.spf)">
          <div class="match-info">
            <div>{{match.issue_num_str}}</div>
            <div class="middle">{{match.league_name}}</div>
            <div>{{match.match_time_str}}</div>
          </div>
          <div class="match-content">
            <div class="match-score">
              {{match.home_team_name}}（主）
              <span>VS</span>
              {{match.guest_team_name}}（客）
            </div>
            <div class="match-select">
              <div
                :class="{active: (((selectedMatchs[match.nm_matches_id] || {})[match.issue_num] || {})['spf'] || {})[0]===(match.spf[0]||[])[2] ? 'active' : '', item: true}"
                @click="selectMatch({nm_matches_id: match.nm_matches_id, type: 'spf', issue_num: match.issue_num, i: 0, value: (match.spf[0]||[])[2]})"
              >{{(match.spf[0]||[])[1]+' '+(match.spf[0]||[])[2]}}</div>
              <div
                :class="{active: (((selectedMatchs[match.nm_matches_id] || {})[match.issue_num] || {})['spf'] || {})[1]===(match.spf[1]||[])[2] ? 'active' : '', item: true}"
                @click="selectMatch({nm_matches_id: match.nm_matches_id, type: 'spf', issue_num: match.issue_num, i: 1, value: (match.spf[1]||[])[2]})"
              >{{(match.spf[1]||[])[1]+' '+(match.spf[1]||[])[2]}}</div>
              <div
                :class="{active: (((selectedMatchs[match.nm_matches_id] || {})[match.issue_num] || {})['spf'] || {})[2]===(match.spf[2]||[])[2] ? 'active' : '', item: true}"
                @click="selectMatch({nm_matches_id: match.nm_matches_id, type: 'spf', issue_num: match.issue_num, i: 2, value: (match.spf[2]||[])[2]})"
              >{{(match.spf[2]||[])[1]+' '+(match.spf[2]||[])[2]}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    matchList: {
      type: Array
    },
    selectedMatchs: {
      type: Object
    }
  },
  data () {
    return {};
  },
  methods: {
    showDetail (item) {
      item.showDetail = !item.showDetail;
      this.$forceUpdate();
    },
    selectMatch (data) {
      this.$emit('selectMatch', data);
    }
  }
};
</script>
<style lang="less">
.flat-container {
  .matchs-item {
    font-size: 0.24rem;
    .matchs-title {
      height: 0.6rem;
      line-height: 0.6rem;
      background: white;
      text-align: center;
      position: relative;
      img {
        position: absolute;
        right: 0.2rem;
        top: 0.16rem;
        transform: rotate(-180deg);
        height: 0.16rem;
        width: 0.3rem;
        &.active {
          transform: rotate(0deg);
        }
      }
    }
    .matchs-detail {
      background: #fff3f4;
      .match-item {
        display: flex;
        border-bottom: 1px solid #d2d2d2;
        height: 1.34rem;
        .match-info {
          width: 1.2rem;
          padding: 0.2rem;
          color: #202020;
          font-size: 0.24rem;
          .middle {
            margin-top: 0.1rem;
            margin-bottom: 0.1rem;
          }
        }
        .match-content {
          width: 100%;
          padding: 0.1rem;
          .match-score {
            text-align: center;
            margin-bottom: 0.1rem;
            span {
              padding-right: 0.1rem;
            }
          }
          .match-select {
            display: flex;
            .item {
              height: 0.54rem;
              flex: 1;
              text-align: center;
              background: #fff;
              border: 1px solid #d2d2d2;
              border-right: none;
              line-height: 0.54rem;
              font-size: 0.2rem;
              &.active {
                background: #d44743;
                color: #fff;
              }
              &:last-child {
                border-right: 1px solid #d2d2d2;
              }
            }
          }
        }
      }
    }
  }
}
</style>
